@alh: 50px;
@cw: 300px;
@clh: 60px;
@pw: 300px;
@plh: 50px;

#alertCardWrapper {
  width: 100%;
  height: @alh;

  position: fixed;
  z-index: 99999;
  top: 50px;
  display: flex;
  justify-content: center;

  transition: .3s;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;

  #alertCard {
    padding: 0 20px;
    background-color: #fcfeff;
    border-radius: 5px;
    box-shadow: 0 0 10px .5px #e9eff2;

    height: @alh;
    line-height: @alh;
    color: var(--darkBlue);
    font-weight: bold;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    #alertIcon {
      font-size: @alh * 0.35;
      margin-right: 20px;
    }

    #alertContent {
      font-size: @alh * 0.35;
    }
  }
}

#confirmCardWrapper {
  width: 100%;

  position: fixed;
  z-index: 99999;
  top: 50px;

  display: flex;
  justify-content: center;

  transition: .2s;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;

  #confirmCard {
    width: @cw;
    height: @clh * 2;
    border-radius: @cw * 0.05;

    background-color: #fcfeff;
    color: var(--darkBlue);
    font-weight: bold;
    box-shadow: 0 0 10px .5px #e9eff2;

    #confirmContent {
      height: @clh;
      line-height: @clh;
      text-align: center;
    }

    #confirmButtonWrapper {
      height: @clh;
      display: flex;
      justify-content: space-around;
      align-items: center;

      #sureButton,
      #cancelButton {
        @bh: @clh * 0.6;
        height: @bh;
        padding: 0 @bh * 0.7;
        
        text-align: center;
        line-height: @bh;
        font-size: @bh * 0.4;
        color: var(--black);

        border-radius: @bh * 0.1;
        border: 1px solid #f5f5f5;
        background-color: white;

        &:hover {
          background-color: var(--slightBlue);
          color: var(--darkBlue);
        }
      }
    }
  }
}

#progressBarWrapper {
  width: 100%;
  position: fixed;
  z-index: 99999;
  top: 50px;

  transition: .2s;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  
  #progressBar {
    margin: 0 auto;

    width: @pw;
    height: @plh * 2;

    box-shadow: 0 0 10px .5px #e9eff2;
    background-color: rgb(249, 253, 255);
    border-radius: @plh * 0.2;

    #progressTitle {
      width: 100%;
      height: @plh * 1.3;
      text-align: center;
      line-height: @plh * 1.3;
      font-size: @plh * 0.6;
      font-weight: bold;
      color: var(--blue);
    }

    #progressLine {
      position: relative;
      width: 80%;
      height: @plh * 0.2;
      margin:  0 auto;

      border-radius: @plh;
      background-color: var(--slightBlue);
      overflow: hidden;

      #progressLineHover {
        height: 100%;
        width: 0%;
        position: absolute;
        left: 0;
        background-color: var(--blueCyan);

        transition: .3s;
      }
    }
  }
}